<template>
	<div>
		<div class="recommend-title">热销推荐</div>
		<ul>
			<li class="item border-bottom" v-for="item of list" :key="item.id">
					<img :src="item.imgUrl" alt="" class="item-img">
				<div class="item-info">
					<p class="item-title">
					{{item.title}}
					</p>
					<p class="item-desc">
					{{item.desc}}
					</p>
					<button class="item-button">
					查看详情
					</button>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	
	export default {
		name : 'Recommend',
		props:{
			list : Array
		}
	}
	
</script>

<style lang="stylus" scoped>
	@import '~styles/mixins.styl'

	.recommend-title
	 line-height:.8rem
	 background:#ccc
	 text-indent:.2rem
	 margin-top:.2rem
	.item
	 display:flex
	 overflow:hidden
	 height:1.9rem
	 .item-img
	  width:1.7rem
	  height:1.7rem
	  padding:.1rem
	 .item-info
	  flex:1
	  min-width:0
	  padding:.1rem
	  .item-title
	   line-height:.54rem
	   font-size:.32rem
	   ellipsis()
	  .item-desc
	   line-height:.4rem
	   color:#ccc
	   ellipsis()
	  .item-button
	   background:#ff9300
	   padding: 0 .1rem
	   border-radius:.06rem
	   margin-top:.16rem
	   line-height.44rem
	   color:white
	  
	
</style>